<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <base th:href="@{/}" href="">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分布式缓存</title>
    <link href="https://cdn.bootcss.com/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/semantic-ui/2.2.10/semantic.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.15.1/moment.min.js"></script>
</head>

<body>
    <div class="ui basic segment" id="app">
        <div class="ui stackable three column grid">
            <div class="column" v-for="item in dash.cacheClients">
                <div class="content">
                    <div class="ui header">Cache Nodes: {{item.ipAddr}}</div>
                    <div class="description">
                        <table class="ui single line table">
                            <tbody>
                                <tr>
                                    <th>ID</th>
                                    <td>{{item.instanceId}}</td>
                                </tr>
                                <tr>
                                    <th>Home Page</th>
                                    <td>{{item.homePageUrl}}</td>
                                </tr>
                                <tr>
                                    <th>Status</th>
                                    <td>{{item.status}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="column" v-for="item in dash.cacheRegistries">
                <div class="content">
                    <div class="ui header">Registry Node: {{item.ipAddr}}</div>
                    <div class="description">
                        <table class="ui single line table">
                            <tbody>
                                <tr>
                                    <th>ID</th>
                                    <td>{{item.instanceId}}</td>
                                </tr>
                                <tr>
                                    <th>Home Page</th>
                                    <td>{{item.homePageUrl}}</td>
                                </tr>
                                <tr>
                                    <th>Status</th>
                                    <td>{{item.status}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="column" v-for="item in dash.cacheUis">
                <div class="content">
                    <div class="ui header">UI Node: {{item.ipAddr}}</div>
                    <div class="description">
                        <table class="ui single line table">
                            <tbody>
                                <tr>
                                    <th>ID</th>
                                    <td>{{item.instanceId}}</td>
                                </tr>
                                <tr>
                                    <th>Home Page</th>
                                    <td>{{item.homePageUrl}}</td>
                                </tr>
                                <tr>
                                    <th>Status</th>
                                    <td>{{item.status}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui divider"></div>
        <div class="ui segment">
            <button class="ui mini button" v-on:click="createHandler">注册</button>
            <button class="ui mini button" v-on:click="refreshHandler">刷新</button>
            <div style="float: right;" class="ui icon input">
                <input style="width: 320px;" v-model="search" type="text" placeholder="Search by ID from random Cache Node...">
                <i v-on:click="searchHandler" class="inverted circular search link icon"></i>
            </div>
        </div>
        <div>
            <table class="ui compact table">
                <thead>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Create Date</th>
                    <th>Update Date</th>
                    <th>Cache Nodes</th>
                    <th>Actions</th>
                </thead>
                <tbody>
                    <tr v-for="item in users">
                        <td>
                            <div title="Search by ID on click." class="ui label" v-on:click="searchByIdHandler(item)">{{item.userInfo.id}}</div>
                        </td>
                        <td>{{item.userInfo.name}}</td>
                        <td>{{item.userInfo.createDate | date}}</td>
                        <td>{{item.userInfo.updateDate | date}}</td>
                        <td>
                            <div v-for="node in item.nodeInfos" class="ui label">{{node.ip + ':' + node.port}}</div>
                        </td>
                        <td>
                            <button class="ui mini button" v-on:click="updateHandler(item)">更新</button>
                            <button class="ui mini button" v-on:click="deleteHandler(item)">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- <h3>Console:</h3>
    <div id="console" class="ui segment"></div> -->
    </div>
    <script src="js/main.js"></script>
</body>

</html>
